<template>
    <div class="goodsItem">
        <div class="itemBox" v-for="(item,index) in goods" v-if="goods.length>0">
            <p>{{item.title}}</p>
            <div class="goodsItembox">
                <dl v-for="(item,index) in item.goods" @click="goToCommidity(item.gid)">
                    <dt>
                        <img v-lazy="item.image" alt="">
                    </dt>
                    <dd>
                        {{item.title}}
                    </dd>
                </dl>
            </div>
        </div>
        <div v-if="goods.length<1">
            没有数据
        </div>
    </div>
</template>
<script>
    import {getGoods} from "../../api/list/list";

    export default {
        name:'goodsItem',
        props:['cids'],
        data(){
            return{
                goods:[],
                cid:""
            }
        },
        mounted() {
            this.initGoods()
        },
        methods:{
            initGoods(){
                let _this = this
                const params = {
                    cid:Number(_this.cid?_this.cid:492),
                    token:'1ec949a15fb709370f'
                }
                getGoods(params).then((res)=>{
                    if(res.data.data == '没有数据'){
                        this.goods = []
                    }else{
                        let data = res.data.data
                        this.goods = data
                    }

                })
            },
            goToCommidity(id){
                this.$router.push({path:'/commodity/index',query:{gid:id}})
            }
        },
        watch:{
            cid(newval,oldval){
                this.initGoods()
            },
            cids(newval){
               this.cid = newval
            }
        }
    }
</script>
<style lang="less" scoped>
    .goodsItem{
        flex: 1;
        overflow: auto;
        padding: 0 0.2rem;
        box-sizing: border-box;
        .itemBox{
            width: 100%;
            margin-top: 0.1rem;
            p{
                margin-bottom: 0.1rem;
            }
            .goodsItembox{
                width: 100%;
                background: white;
                padding: 0.2rem 0.1rem;
                box-sizing: border-box;
                dl{
                    width: 33%;
                    float: left;
                    dt{
                        width: 100%;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        img{
                            width: 1rem;
                            height: 1rem;
                            display: block;
                        }
                    }
                    dd{
                        white-space: nowrap;
                        overflow:hidden;
                        text-overflow:ellipsis;
                        text-align: center;
                    }
                }
            }

        }
    }
</style>